const path = require('path')
const themePath = path.resolve(__dirname, './src/assets/styles/vantStyle.less')

module.exports = {
  productionSourceMap: false,
  devServer: {
    port: 9000
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
            // exclude: '@/assets/styles/common.less'
            // exclude: [path.resolve(__dirname, './src/assets/styles/common.less')]
          })
        ]
      },
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        modifyVars: {
          // 直接覆盖变量
          // blue: '#4e72b8',
          // red: '#000000',
          // 'text-color': '#111',
          // 'border-color': '#eee',
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${themePath}"`
        }
      }
    }
  },
  // 设计打包入口
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        vant: 'Vant',
        'vue-router': 'VueRouter',
        // vuex: 'Vuex',
        dayjs: 'dayjs',
        'core-js': 'corejs',
        swiper: 'Swiper',
        // 'vue-awesome-swiper': 'SwiperSlide',
        axios: 'axios'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')

      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}
